<template>
  <div class="member">
    <div class="member_header">
      <div class="commons_top">
        <div class="commons_back" @click="$router.go(-1)">
          <img src="@/assets/member/back.png" />
        </div>
        <span class="commons_title">会员中心</span>
      </div>
      <div class="member_card">
        <img class="member_head_icon" :src="coverUrl(avatarUrl)" @error="errImg('member')">
        <div class="member_info">
          <div class="member_nickName">
            {{account}}<!-- 皇冠 -->
            <img class="member_king_icon" src="@/assets/common/member.png" v-if="isVip==1">
          </div>
          <div class="member_term" v-if="isVip==0">未开通VIP</div>
          <div class="member_term" v-if="isVip==1 && date">{{date}}到期</div>
          <div class="member_term" v-if="isVip==2 && date">会员于{{date}}已过期</div>
        </div>
      </div>
    </div>
    <div style="background:#fff;marginTop:0.69rem;border-radius: 0.3rem 0.3rem 0px 0px;">
      <!-- vip会员特权 -->
      <div class="member_vip">
        <div class="member_vip_title">VIP会员特权</div>
        <div class="member_vip_main">
          <div class="member_vip_list" v-for=" item in imageList" :key="item.id">
            <img class='member_vip_icon' :src='item.url'>
            <div class="member_vip_text">{{item.text}}</div>
            <div class="member_vip_tips">{{item.tip}}</div>
          </div>
        </div>
      </div>
      <!-- VIP会员套餐 -->
      <div class="member_renew">
        <div class="member_renew_title">VIP会员套餐</div>
        <div class="member_renew_main">
          <swiper :options='swiperOption'>
            <swiper-slide v-for="(item,index) in vipList" :key="index" class="member_swiper">
              <div class="member_scroll_view" :class="currentId==item.id?'hoverColor':''" @touchstart="changePrice(item.id,item.realPrice)">
                <div class="member_scroll_name">{{item.name}}</div>
                <!-- <div :class="item.price!=null?'mermber_price_box':'change'"> -->
                  <div class="member_scroll_money">
                    <span class="member_scroll_symbol">¥</span>
                    <span class="member_scroll_text">{{item.realPrice}}</span>
                  </div>
                  <div class="member_scroll_discount" v-if="item.price">￥{{item.price}}</div>
                <!-- </div> -->
                <!-- <div class="member_scroll_save" v-if="item.price">立省{{item.price-item.sellprice}}元</div> -->
                <img v-if="currentId==item.id" class="member_scroll_reco" src="@/assets/member/border.png">
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- isVip==1||isVip==2 -- 1-已开通会员 2-会员已过期 ---立即续费  isVip==0 ---开通 -->
      <div class="member_renew_cost" @click="open">{{openText}}</div>
      <!-- vip会员服务 -->
      <div class="member_help">
        <div class="member_help_title">VIP会员服务</div>
        <div class="member_help_tip">
          <div class="member_help_tips" style="marginBottom:0.5rem">VIP会员是华夏数字图书馆推出的一项租阅服务，开通会员服务后，可畅读VIP精选电子书。目前有三档：月会员(30天)，季会员(90天)，年会员(365天)。</div>
          <div class="member_help_tips">1.VIP会员生效</div>
          <div class="member_help_tips">购成功后即刻生效，VIP会员租阅服务不支持退货，从当天开始计时，到期后需续订才能继续免费阅读。</div>
          <div class="member_help_tips">2.VIP会员到期和续订</div>
          <div class="member_help_tips">VIP会员到期后，您借阅的电子书将不能阅读，续订租阅或直接购入图书，方可再次阅读</div>
          <div class="member_help_tips">3.如何支付？</div>
          <div class="member_help_tips">支持微信支付。</div>
        </div>
      </div>
    </div>
    <!-- 支付弹窗 -->
    <pay-item :dialog="payDialog" @setDialog='setDialog' :currentPrice="currentPrice" :currentId="currentId" @getDet="getDet"></pay-item>
  </div>
</template>


<script>
import '@static/css/common.css'
import { Toast } from 'mint-ui';
import { getVipAPI, getMemberAPI } from '@/api/person.js'
import { freeCourseAPI } from '@/api/course.js'
import { wxPayAPI, isPayCoursementAPI } from '@/api/order.js'
import wx from 'weixin-js-sdk';
import { setTimeout } from 'timers';
import utils from '@/utils/utils.js'
import pay from '@/components/pay'

export default {
  components: { payItem: pay },
  data() {
    return {
      vipList: [],
      currentId: null,
      ifLogin: false,
      account: '游客',
      avatarUrl: null,
      date: null,
      isVip: null,
      currentPrice: null,
      openid:'',
      isModel: false,
      session_key:'',
      wxPhnoe: {
        channel: null,
        phone: null,
        wechatKey: null
      },
      imageList:[
        { url: require('@/assets/member/icon_resource.png'), text: '免费畅读',tip:'免费畅读VIP书库' },
        { url: require('@/assets/member/icon_discount.png'), text: '会员折扣',tip:'全场电子书购买8折' },
        { url: require('@/assets/member/icon_gift.png'), text: '优惠购书',tip:'开通会员获购书优惠码'},
        { url: require('@/assets/member/icon_logo.png'), text: '线下活动',tip:'可参加各地线下活动'},
      ],
      swiperOption: { //可视区域个数
        slidesPerView: 'auto',
      },
      url: '',
      openText:'开通',
      orderId:'',
      utils:utils,
      payDialog:false,
    }
  },
  created() {
    console.log(localStorage.getItem('ispayment'),'wweee')
    if(localStorage.getItem('ispayment')) {//判断是否支付过
      isPayCoursementAPI({oid: localStorage.getItem('memberId')}).then(res => {
        if(res.data.data == 1){//支付成功
          Toast('支付成功');
        } else{
          Toast('支付失败');
        }
        localStorage.removeItem("ispayment")
        this.getvipMember()
      })
    } else{
      this.getvipMember()
    }
  },
  mounted() {
    this.getVipList()
  },
  methods: {
    setDialog(val){ //关闭支付弹窗
      this.payDialog = val
    },
    open() { //打开支付弹窗
      this.payDialog = true
    },
    getDet() { //支付成功--刷新当前页面
      this.getvipMember()
      this.payDialog = false
    },
    getVipList () {//支付列表
      getVipAPI().then(res => {
        if(res.data.code == 0) {
          this.vipList=res.data.data,
          this.currentId=res.data.data[0].id,
          this.currentPrice=res.data.data[0].realPrice
        } else {
          Toast(res.data.msg);
        }
      })
    },
    getvipMember() {//查看是否登录--vip获取详情
      if(localStorage.getItem('y-token')) {
        this.ifLogin = true
        getMemberAPI().then(res => {
          if (res.data.code == 0) {
            this.account= res.data.data.account
            this.avatarUrl= res.data.data.cover
            this.date= res.data.data.vipEndTime ? res.data.data.vipEndTime.substring(0,10) : ''
            this.isVip= res.data.data.vip
            if(!this.isVip||this.isVip==0) {
              this.openText = '开通'
            } else {
              this.openText = '立即续费'
            }
          }
        })
      } else {
        this.ifLogin = false
      }
    },
    changePrice(id,sell) { //点击改变背景色
      this.currentId = id
      this.currentPrice = sell
    },
    goServerDel() {
      this.$router.push({name:'serveDeal'})
    },
  },
}
</script>
<style scoped>
  .member {
    width: 100%;
    height: 100%;
    background: #F4F6FA;
    background: url('../../assets/member/bg.png');
    background-size:  100%;
    background-repeat: no-repeat;
  }
  .member .commons_title {
    color: #fff;
  }
  .member_card {
    margin-left: 0.32rem;
    margin-top: 0.95rem;
    height: 1.12rem;
  }
  .member_head_icon{
    width: 1.02rem;
    height: 1.02rem;
    border-radius: 50%;
    margin-right: 0.3rem;
    margin-top: 0.05rem;
    float: left;
  }
  .member_king_icon {
    width: 0.31rem;
    height: 0.26rem;
    margin-left: 0.1rem;
    margin-top: 0.04rem;
  }
  .member_info {
    float: left;
    line-height: 0.4rem;
    width: 60%;
    display:flex;
    display:-ms-flexbox;
    height: 1.12rem;
    flex-wrap: wrap;
    align-content: center;
  }
  .member_nickName {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 800;
    margin-top: 0.11rem;
    margin-bottom: 0.19rem;
    width: 100%;
  }
  .member_term {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
  }
  .member_renew {
    background: #fff;
    padding-left: 0.3rem;
    /* border-radius: 0.2rem 0.2rem 0px 0px; */
    overflow: hidden;
  }
  .member_renew_title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0.49rem;
  }
  .member_renew_main {
    padding-right: 0.1rem;
    box-sizing: border-box;
  }
  .member_swiper {
    width: 2.4rem !important;
    text-align:center;
  }
  .member_scroll_view {
    border: 2px solid #EDEDED;
    margin-right: 0.24rem;
    width: 2.15rem;
    height: 2.49rem;
    text-align: center;
    padding: 0.51rem 0 0;
    position: relative;
    border-radius: 0.18rem;
    overflow: hidden;
    vertical-align: top;
    float: left;
    box-sizing: border-box;
    background: #F9F9F9;
  }
  .member_scroll_reco {
    position: absolute;
    width: 0.42rem;
    height: 0.39rem;
    top: 0;
    left: -2px;
  }
  .member_scroll_name {
    color: #333333;
    font-size: 15px;
    font-weight:500;
  }
  /* .mermber_price_box{
    display:flex;
    display:-ms-flexbox;
    height: 1rem;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
  } */
  .member_scroll_money {
    color: #000000;
    font-weight:500;
    /* margin: 0.1rem 0; */
  }
  /* .change {
    margin-top: 0.4rem;
  } */
  .member_scroll_symbol {
    font-size: 16px;
  }
  .member_scroll_text {
    font-size: 29px;
  }
  .hoverColor {
    background: #fff;
    border-color: #FB574D;
  }
  .hoverColor .member_scroll_money {
    color: #F9594F;
  }
  .member_scroll_discount {
    width: 100%;
    color: #999999;
    font-size: 10px;
    font-weight:500;
    text-decoration: line-through;
  }
  .member_scroll_save {
    width: 1.76rem;
    height:0.46rem;
    line-height: 0.46rem;
    text-align: center;
    background: #FFA771;
    border-radius: 0.06rem;
    color: #fff;
    font-size: 12px;
    margin: 0 auto;
  }
  .member_icon {
    width: 0.21rem;
    height: 0.21rem;
    margin-right: 0.06rem;
  }
  .member_text {
    color: #fff;
    font-size: 10px;
    font-weight: 500;
  }
  .member_renew_cost {
    margin: 0.7rem 0.3rem 0;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    color: #fff;
    background: linear-gradient(78deg, #FD8666, #FB584D);
    border-radius: 0.4rem;
    font-size: 15px;
    font-weight: bold;
  }
  .member_vip {
    padding: 0.48rem 0 0.72rem;
    box-sizing: border-box;
  }
  .member_vip_title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0.54rem;
    padding-left: 0.3rem;
  }
  .member_vip_main {
    overflow: hidden;
    padding: 0 0.14rem;
    display: flex;
  }
  .member_vip_list {
    width: 20%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
  }
  .member_vip_icon {
    width: 0.97rem;
    height: 0.97rem;
  }
  .member_vip_text {
    color: #333333;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0.1rem;
  }
  .member_vip_tips {
    color: #BDBCBC;
    font-size: 10px;
    font-weight: 500;
  }
  
  .member_help {
    background: #fff;
    padding: 0.69rem 0.3rem 0.52rem;
    box-sizing: border-box; 
    font-size: 14px;
    font-weight:500;
  }
  .member_help_title {
    color: #333333;
    font-size: 16px;
    font-weight:bold;
    margin-bottom: 0.3rem;
  }
  .member_help_tip {
    color: #D07227;
    font-size: 13px;
    padding: 0.3rem;
    line-height: 0.38rem;
    background:#FFFAEF;
    margin-top: 0.36rem;
  }
  .member_help_tips {
    line-height: 0.51rem;
  }
</style>
